<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

    <h3>指令: v-model</h3>

    <div id="root">
        <input type="radio" v-model="radio.picked" :value="radio.value">
        <p>radio.picked: {{ radio.picked }}</p>

        <input type="checkbox" 
               v-model="box.picked" 
               :true-value="box.yes" 
               :false-value="box.no">
        <p>box.picked: {{ box.picked }}</p>

        <!--
        <select v-model="province">
            <option :value="{ id: 11 , value: 'hexi' }">河西省</option>
            <option :value="{ id: 22 , value: 'hedong' }">河东省</option>
            <option :value="{ id: 10 , value: 'jiangbei' }">江北省</option>
            <option :value="{ id: 09 , value: 'jiangnan' }">江南省</option>
        </select>
        -->
        <select v-model="province">
            <option v-for="p in provinces" :value="p">{{ p.name }}</option>
        </select>
        <p>province: {{ province }}</p>
    </div>

    <script src="../scripts/vue@3.2.31.js" type="text/javascript"></script>

    <script type="text/javascript">
        const options = {
            data(){
                return {
                    radio: {
                        picked: '',
                        value: '3.1415926'
                    },
                    box: {
                        picked: '未中',
                        yes: '中了',
                        no: '未中'
                    },
                    province: '',
                    provinces: [
                        { id: 111 , name: '广北省' , value: 'guangbei' },
                        { id: 123 , name: '江北省' , value: 'jiangbei' },
                        { id: 456 , name: '江南省' , value: 'jiangnan' },
                        { id: 789 , name: '广南省' , value: 'guangnan' }
                    ]
                }
            }
        }
        Vue.createApp(options).mount('#root');
    </script>
    
</body>
</html>